<template>
  <div id="app">

    <!-- 头部 -->
    <div style="height: 60px; line-height: 60px; background-color: rgb(222,199,255); width: 100%;">
      <div style="position: relative; top: 10px; left: 20px; width: 40px; float: left; margin-left: 28%">
        <svg t="1669196297795" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="4077" width="40" height="40">
          <path
              d="M511.981761 1024a811.427093 811.427093 0 0 0-511.981761-176.249721V300.825763a811.427093 811.427093 0 0 1 511.981761 176.249721A811.491091 811.491091 0 0 1 1023.963521 300.825763v546.924516A811.491091 811.491091 0 0 0 511.981761 1024z m415.98518-621.161871a704.614898 704.614898 0 0 0-355.507335 148.794699L511.981761 600.687081l-60.477846-49.054253A704.486903 704.486903 0 0 0 95.99658 402.838129v353.747398a908.767625 908.767625 0 0 1 415.985181 148.122723 908.767625 908.767625 0 0 1 415.98518-148.122723V402.838129zM511.469779 298.361851a149.178686 149.178686 0 1 1 149.146687-149.178686 149.306681 149.306681 0 0 1-149.146687 149.178686z"
              fill="#0590DF" p-id="4078"></path>
        </svg>
      </div>
      <div style="margin-left: 180px">
        <span>暮酌图书馆</span>
      </div>

    </div>

    <div style="position: absolute; bottom: 0; width: 100%">
      <el-menu
          :default-active="$router.push"
          router
          mode="horizontal"
          background-color="#916ECA"
          text-color="#fff"
          active-text-color="#ffd04b"
      >
        <el-menu-item index="home" style="margin-left: 4%"><i class="el-icon-price-tag"></i>主页</el-menu-item>
        <el-menu-item index="book" style="margin-left: 4%"><i class="el-icon-s-order"></i>图书信息</el-menu-item>
        <el-menu-item index="user" style="margin-left: 4%"><i class="el-icon-setting"></i>设置</el-menu-item>
      </el-menu>

    </div>

    <!--      主体-->

    <div style="flex: 1; padding: 10px; background-color: white; width: 100%; margin-top: 10px; min-height: calc(100vh - 80px)" >
      <div style="margin-top: 20px">
        <router-view/>
      </div>
    </div>



  </div>


</template>

<script>
import Cookies from "js-cookie";

export default {
  name: "manage.vue",
  data() {
    return {
      admin: Cookies.get('admin') ? JSON.parse(Cookies.get('admin')) : {}
    }
  },
  methods: {
    handleSelect(index) {
      this.$route.fullPath.split('/')
    },
    logout() {
      Cookies.remove('admin');
      this.$router.push("/login");
      this.$message.success("退出成功")
    }
  },
  computed: {
    currentPathName() {
      return this.$store.state.currentPathName;　　//需要监听的数据
    }
  },
  watch: {
    currentPathName(newVal, oldVal) {
      console.log(newVal)
    }
  },

}
</script>

<style scoped>


</style>